import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_context_menu/flutter_context_menu.dart';
import 'package:flutter_sortable_wrap/flutter_sortable_wrap.dart';
import 'package:provider/provider.dart';
import 'package:sites_hub/DB.dart';
import 'package:url_launcher/url_launcher.dart';

import '../main.dart';

class SitePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _SitePageState();
}

class SiteDataProvider with ChangeNotifier {
  Future<List<SiteItem>> aa() async {
    List<Map<String, dynamic>> re =
        await DB.instance.database.rawQuery('select * from site_collect');
    return re.map((it) {
      return SiteItem(
          siteName: it['site_name'],
          iconUrl: it['icon'],
          siteUrl: it['site_url']);
    }).toList();
  }

  void addItem(SiteItem item) {
    // _site_list_inner.add(item);
    notifyListeners();
  }
}

class _SitePageState extends State<SitePage> {
  List<SiteItem> list = [];
  List<SiteItem> myList = [];

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: FutureBuilder(
            future: context.watch<SiteDataProvider>().aa(),
            builder:
                (BuildContext context, AsyncSnapshot<List<SiteItem>> snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center();
              } else {
                list = snapshot.data!;
                myList.addAll(list);
                return SortableWrap(
                    children: list.map((e) {
                      return Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          children: [
                            SizedBox(
                              height: 50,
                              width: 50,
                              child: CachedNetworkImage(
                                imageUrl: e.iconUrl,
                                fit: BoxFit.contain,
                                height: 50,
                                width: 50,
                              ),
                            ),
                            Text(
                              e.siteName,
                              style: TextStyle(
                                  fontSize: 20,
                                  foreground: Paint()..color = Colors.white),
                            )
                          ],
                        ),
                      );
                    }).toList(),
                    onSorted: (oldIndex, newIndex) {
                      myList.insert(newIndex, list.removeAt(oldIndex));
                    });
                // return Wrap(
                //   alignment: WrapAlignment.start,
                //   direction: Axis.horizontal,
                //   spacing: 10,
                //   runSpacing: 10,
                //   children: snapshot.data!.map((e) {
                //     return GestureDetector(
                //       onTap: () async {
                //         await launchUrl(Uri.parse(e.siteUrl));
                //       },
                //       child: Builder(builder: (context) {
                //         return Container(
                //           height: 80,
                //           width: 80,
                //           decoration: const BoxDecoration(),
                //           child: Tooltip(
                //             message: e.siteUrl,
                //             child: ContextMenuRegion(
                //               contextMenu: ContextMenu(entries: [
                //                 const MenuHeader(text: "Context Menu"),
                //                 MenuItem(
                //                   label: 'Copy',
                //                   icon: Icons.copy,
                //                   onSelected: () {
                //                     // implement copy
                //                   },
                //                 ),
                //                 MenuItem(
                //                   label: 'Paste',
                //                   icon: Icons.paste,
                //                   onSelected: () {
                //                     // implement paste
                //                   },
                //                 ),
                //                 const MenuDivider(),
                //                 MenuItem.submenu(
                //                   label: 'Edit',
                //                   icon: Icons.edit,
                //                   items: [
                //                     MenuItem(
                //                       label: 'Undo',
                //                       value: "Undo",
                //                       icon: Icons.undo,
                //                       onSelected: () {
                //                         // implement undo
                //                       },
                //                     ),
                //                     MenuItem(
                //                       label: 'Redo',
                //                       value: 'Redo',
                //                       icon: Icons.redo,
                //                       onSelected: () {
                //                         // implement redo
                //                       },
                //                     ),
                //                   ],
                //                 ),
                //               ]),
                //               child: Draggable(
                //                 feedback: SizedBox(
                //                   height: 50,
                //                   width: 50,
                //                   child: Image.network(
                //                     e.iconUrl,
                //                     fit: BoxFit.contain,
                //                   ),
                //                 ),
                //                 data: 'testdata',
                //                 child: DragTarget(
                //                   onAcceptWithDetails: (a) {
                //                     print(a.runtimeType);
                //                   },
                //                   builder: (BuildContext context,
                //                       List<Object?> candidateData,
                //                       List<dynamic> rejectedData) {
                //                     return
                //                     Column(
                //                       children: [
                //                         SizedBox(
                //                           height: 50,
                //                           width: 50,
                //                           child: Image.network(
                //                             e.iconUrl,
                //                             fit: BoxFit.contain,
                //                           ),
                //                         ),
                //                         Text(
                //                           '${e.siteName}',
                //                           style: TextStyle(
                //                               fontSize: 20,
                //                               foreground: Paint()
                //                                 ..color = Colors.white),
                //                         )
                //                       ],
                //                     );
                //                   },
                //                 ),
                //               ),
                //             ),
                //           ),
                //         );
                //       }),
                //     );
                //   }).toList(),
                // );
              }
            },
          ),
        ),
      ),
    );
  }
}
